<template>
  <div class="box">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="100px" label="员工编号：">
                  <span v-if="show===false">{{ form.account }}</span>
                  <el-input v-if="show===true" v-model="form.account" :disabled="true" style="width:200px" />
                </el-form-item>

              </div>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="100px" label="司机名称：">
                  <span v-if="show===false">{{ form.name }}</span>
                  <el-input v-if="show===true" v-model="form.name" :disabled="true" style="width:200px" />
                </el-form-item>
              </div>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="100px" label="所属机构：">
                  <span v-if="show===false">{{ form.agency }}</span>
                  <el-input v-if="show===true" v-model="form.agency" :disabled="true" style="width:200px" />
                </el-form-item>
              </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="100px" label="电话:">
                  <span v-if="show===false">{{ form.mobile }}</span>
                  <el-input v-if="show===true" v-model="form.mobile" :disabled="true" style="width:200px" />
                </el-form-item>
              </div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="100px" label="年龄:">
                  <span v-if="show===false">{{ form.age }}</span>
                  <el-input v-if="show===true" v-model="form.age" style="width:200px" />
                </el-form-item></div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" /></el-col>
            </el-row>

          </el-form>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
          <el-form ref="drivingForm" :model="drivingForm" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="130px" label="驾驶证号:">
                  <span v-if="show===false">{{ drivingForm.licenseNumber }}</span>
                  <el-input v-if="show===true" v-model="drivingForm.licenseNumber" style="width:200px" />
                </el-form-item>

              </div>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="100px" label="准驾车型">
                  <span v-if="show===false">{{ drivingForm.allowableType }}</span>
                  <el-input v-if="show===true" v-model="drivingForm.allowableType" style="width:200px" />
                </el-form-item>
              </div>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="130px" label="初次领证日期：">
                  <span v-if="show===false">{{ drivingForm.initialCertificateDate }}</span>
                  <template>
                    <div class="block">
                      <el-date-picker
                        v-if="show===true"
                        v-model="drivingForm.initialCertificateDate"
                        style="width:200px"
                        type="date"
                        placeholder="选择日期"
                      />
                    </div>
                  </template>
                  <!-- <el-input v-if="show===true" v-model="drivingForm.initialCertificateDate" style="width:200px" /> -->
                </el-form-item>
              </div>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="130px" label="驾驶证有效期限:">
                  <span v-if="show===false">{{ drivingForm.validPeriod }}</span>
                  <el-input v-if="show===true" v-model="drivingForm.validPeriod" style="width:200px" />
                </el-form-item>
              </div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="100px" label="驾龄:">
                  <span v-if="show===false">{{ drivingForm.driverAge }}年</span>
                  <el-input v-if="show===true" v-model="drivingForm.driverAge" style="width:200px" />
                </el-form-item>
              </div>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="130px" label="驾驶证类型:">
                  <span v-if="show===false">{{ drivingForm.licenseType }}</span>
                  <el-input v-if="show===true" v-model="drivingForm.licenseType" style="width:200px" />
                </el-form-item>
              </div>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="130px" label="从业资格证:">
                  <span v-if="show===false">{{ drivingForm.qualificationCertificate }}</span>
                  <el-input v-if="show===true" v-model="drivingForm.validPeriod" style="width:200px" />
                </el-form-item>
              </div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <el-form-item label-width="100px" label="入场证信息:">
                  <span v-if="show===false">{{ drivingForm.passCertificate }}</span>
                  <el-input v-if="show===true" v-model="drivingForm.passCertificate" style="width:200px" />
                </el-form-item>
              </div>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple" />
              </el-col>
            </el-row>

            <el-form-item label-width="130px" label="图片信息:">
              <!-- <span v-if="show===false">{{ drivingForm.passCertificate }}</span>
              <el-input v-if="show===true" v-model="drivingForm.passCertificate" style="width:200px" /> -->
              <!-- <el-upload
                class="avatar-uploader"
                action=""
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="drivingForm.picture" :src="drivingForm.picture" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload> -->

              <el-upload
                :file-list="defaultFileList"
                action=""
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <!-- <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="drivingForm.picture" alt="">
              </el-dialog> -->

              <!-- <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="drivingForm.picture" alt="">
              </el-dialog> -->
            </el-form-item>

          </el-form>
        </el-tab-pane>
      </el-tabs>

    </div>
    <div class="foot">
      <el-button v-if="show===false" style="width:100px" type="primary" @click="show=true">编辑</el-button>
      <el-button v-if="show===true" style="width:100px" type="primary" @click="save">保存</el-button>
      <el-button v-if="show===true" style="width:100px" @click="show=false">取消</el-button>
    </div>

  </div>
</template>
<script>
import { getParticulars, putParticulars, getDriverLicense, postDriverLicense } from '@/api/branches'
export default {
  data() {
    return {
      activeName: 'first',
      form: {
        age: '',
        avatar: '',
        mobile: '',
        name: '',
        userId: '',
        workNumber: '',
        workStatus: ''
      },
      drivingForm: {
        allowableType: '',
        driverAge: '',
        id: '',
        initialCertificateDate: '',
        licenseNumber: '',
        licenseType: '',
        passCertificate: '',
        picture: '',
        qualificationCertificate: '',
        userId: '',
        validPeriod: ''
      },
      dialogImageUrl: '',
      //   dialogVisible: true,
      disabled: false,
      show: false,
      defaultFileList: [],
      tab: 'first'
    }
  },
  created() {
    this.getParticulars()
    this.getDriverLicense()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name, event)
      this.tab = tab.name
    },
    async save() {
      if (this.tab === 'first') {
        console.log(222)
        const id = this.$route.params.id
        await putParticulars({ ...this.form, id: id })
        this.show = false
        this.$message.success('保存成功')
      } else {
        console.log(111)
        const res = await postDriverLicense(this.drivingForm)
        console.log(res)
        this.show = false
        this.$message.success('保存成功')
      }
    },
    async getParticulars() {
      const id = this.$route.params.id
      const res = await getParticulars(id)
      this.form = res.data
      this.form.agency = res.data.agency.name
    },
    async getDriverLicense() {
      const id = this.$route.params.id
      const reslue = await getDriverLicense(id)
      console.log(reslue)
      if (reslue.data.picture) {
        const linksArray = reslue.data.picture.split(',').map(link => link.trim())
        this.defaultFileList = linksArray.map(link => ({ url: link }))
        console.log(this.defaultFileList)
      }
      this.drivingForm = reslue.data
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      console.log(file)
      // this.drivingForm.picture = file.url
      // postImageUpload(file)
      this.dialogVisible = true
    }
  }
}
</script>

<style>
.box{
    padding: 15px 20px;
}
.top{
    width: 100%;
    background-color: white;
    padding: 10px 30px;
    height: 450px;
}
.foot{
    background-color: white;
    height: 100px;
    padding: 50px 0 10px;
    border-top: 1px solid gray;
    width: 100%;
    display: flex;
    justify-content: center;
}

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
